<template>
  <view :data-theme="globPrimary">
    <u-navbar title="学员管理"></u-navbar>
    <view class="student-wrap">
      <mescroll-body
        ref="mescrollRef"
        :height="mescrollHeight"
        @init="mescrollInit"
        @down="refresh"
        @up="reachBottom"
      >
        <view class="item u-border-bottom" v-for="item in studentList" :key="item.user_id">
          <u-avatar :src="item.avatar_url" size="114" @click="onUser(item.user_id)"></u-avatar>
          <view class="content">
            <view class="name u-line-1">{{ item.nick_name }}</view>
            <view class="text">获取方式：{{ item.from_text }}</view>
          </view>
          <view
            class="btn"
            :style="{
              'border-color': globPrimaryColor,
              color: globPrimaryColor,
            }"
            @click="deleteStudent(item.user_id)"
            >移除</view
          >
        </view>
      </mescroll-body>
    </view>
    <u-modal
      show-cancel-button
      v-model="deleteModal"
      :show-title="false"
      confirm-text="移除"
      cancel-text="再想想"
      confirm-color="#f54030"
      :confirm-style="{ 'border-left': '1px solid #e4e7ed' }"
      @confirm="handlePaymentDelete"
    >
      <view class="u-text-center u-font-32 u-main-color u-padding-top-70 u-padding-bottom-60"
        >确定移除该学员吗？</view
      >
    </u-modal>

    <edu-user-coupon></edu-user-coupon>
  </view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
import { mapGetters } from 'vuex'
export default {
  mixins: [MescrollMixin],
  data() {
    return {
      studentList: [],
      classesId: '',
      studentId: '',
      deleteModal: false,
      isDataEmpty: false,
    }
  },
  computed: {
    ...mapGetters({
      globPrimary: 'designSetting/getGlobTheme',
      globPrimaryColor: 'designSetting/getGlobThemeColor',
      globNavbarHeight: 'projectSetting/globNavbarHeight',
      globStatusBarHeight: 'projectSetting/globStatusBarHeight',
    }),
    mescrollHeight() {
      let windowHeight = this.$u.sys().windowHeight
      let height = windowHeight - this.globNavbarHeight - this.globStatusBarHeight
      return `${height}px`
    },
  },
  onLoad(query) {
    this.classesId = query.id
  },
  methods: {
    refresh() {
      this.mescroll.resetUpScroll()
    },
    // 页面数据
    reachBottom() {
      this.$edu.api.getCourseClassesStudents(this.classesId).then((res) => {
        const { data } = res
        this.studentList = data
        this.mescroll.endSuccess(data.length)
      })
    },
    deleteStudent(id) {
      this.studentId = id
      this.deleteModal = true
    },
    // 移除学员
    handlePaymentDelete() {
      this.$edu.api.deleteCourseClassesStudent(this.classesId, this.studentId).then((res) => {
        this.$u.toast(res.msg)
        this.studentList.splice(
          this.studentList.findIndex((item) => item.user_id === this.studentId),
          1
        )
        // 数据为空
        if (this.$u.test.empty(this.studentList)) {
          this.isDataEmpty = true
        }
      })
    },
    onUser(id) {
      this.$edu.judgeLogin(() => {
        this.$edu.route('/pageFound/user/index', {
          id: id,
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.student-wrap {
  background-color: #ffffff;
  .item {
    display: flex;
    align-items: center;
    padding: 40rpx 30rpx;
    .content {
      margin-left: 32rpx;
      max-width: 400rpx;
    }
    .name {
      font-size: 30rpx;
      font-weight: 400;
      color: $edu-main-color;
    }
    .text {
      margin-top: 20rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: $edu-tips-color;
    }
    .btn {
      margin-left: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 110rpx;
      height: 42rpx;
      font-size: 22rpx;
      font-weight: 400;
      border-radius: 4rpx;
      border-width: 2rpx;
      border-style: solid;
      @include text-color();
      @include border-color();
    }
  }
}
</style>
